// 1. 引入sme-router
import SMERouter from 'sme-router'

// 引入模板
// 返回的index是一个函数,index函数调用的返回值就是模板中html结构字符串
import index from './views/index.ejs'
// console.log(index())

// 2. 创建router对象
// root 是index.html中写死的一个节点的id名
// 注意: smeRouter默认是hash模式,root后面添加html5则变为history模式
// hash模式改变的是hash值,路径没有变,路径一直是/
// history模式改变的就是路径
const router = new SMERouter('root', 'html5')
// 把router对象暴露到全局
window.router = router

// 3. 配置前端路由规则
// router.route('/路径',回调函数) //回调函数中返回对应要渲染的视图
router.route('/index', function (req, res) {
  let obj = {
    arr: ['lt', 'is', 'lsp', 'abc'],
    msg: '晶哥,红烂漫10级vip',
    flag: false, //true, 老陶是1展示, false,晶哥是0展示
  }
  // 将要渲染的数据,传入到对应模板返回的函数调用中
  // 注意: 由于在webpack配置项中,配置了
  // options: {
  //   variable: 'data', //给传入到模板中的数据声明一个变量叫data
  // },
  // 所以,在模板中可以直接通过data拿到我们传入obj
  res.render(index(obj))
})
router.route('/login', function (req, res) {
  res.render('<h1>登录页</h1>')
})
router.route('/404', function (req, res) {
  res.render('找不到您想要的页面')
})
// 以上的路由都匹配不上的时候,就会执行*.重定向到404
router.route('*', function (req, res) {
  // 重定向把浏览器地址栏的路径改成404
  res.redirect('/404')
})
